<style>


fieldset {
	border: 1px solid #781351;
	background: #F7F7F7;
}

legend {
	color: #fff;
	background: #0978EA;
	border: 1px solid #781351;
	padding: 2px 6px
}



#container1 {
    float:left;
    width:100%;
}
#grid_artefato {
    float:left;
    width:40%;
   // background:red;
}
#artefactoImg {
    float:left;
    width:40%;
    margin-top:-30px;
    margin-left:130px;
    //background:yellow;
}
</style>

<script type="text/javascript">	

			function embEspecialFinal(){
		         //envio el formulario utilizando ajax
		         var parametros = $("#artefactoForm").serialize();
		         $.ajax({
		            type:'POST',
		            dataType:'JSON',
		            data:parametros,
		            url: "${pageContext.request.contextPath}/artefacto.action?final=1",
		            success:function(responseText){
		         	   
		         	   var data2 = eval(responseText);//json_parse(responseText);
		         	  
		                // alert(data);
		         	   $("#oper").val("edit");
			   				$("#idArtefactoNaval").val(data2.idArtefactoNaval);
			   				$("#drop_zone_1").show();

			   				//jQuery("#sMotorEmbArt").jqGrid('setGridParam',{postData:{idBuque:$("#idBuque").val()}});
			   			/*	if(artefactoControlador==3){
			   					$("#artefacto_accordion").accordion('activate',4);
			   					artefactoControlador++;
			   				 }*/
							
			   				if(artefactoControlador==2){
			   					$("#artefacto_accordion").accordion('activate',3);
			   					artefactoControlador++;
			   				 }
			   				
			   				 if(artefactoControlador==1){
			   		          $("#artefacto_accordion").accordion('activate',2);
				   					//$("#buqLinkProp").trigger("click");
			   					artefactoControlador++;
			   				 }
			   				
			   			
		                }
		         });
		     }
		     
			function enviarFormArtefacto(idFormulario){
		    $(idFormulario).submit(function (){
		        if($("#artefactoForm").valid()){
		            //envio el formulario utilizando ajax
		            var parametros = $(this).serialize();
		            $.ajax({
		               type:'POST',
		               dataType:'JSON',
		               data:parametros,
		               url: "${pageContext.request.contextPath}/artefacto.action",
		               success:function(responseText){
		            	   
		            	   var data2 = eval(responseText);//json_parse(responseText);
		            	  
		                //    alert(artefactoControlador);
		            	   $("#oper").val("edit");
			   				$("#idArtefactoNaval").val(data2.idArtefactoNaval);

			   				//jQuery("#sMotorEmbArt").jqGrid('setGridParam',{postData:{idBuque:$("#idBuque").val()}});
			   				$("#drop_zone_1").show();
			   				/*if(artefactoControlador==3){
			   					$("#artefacto_accordion").accordion('activate',4);
			   					artefactoControlador++;
			   				 }*/
							
			   				if(artefactoControlador==2){
			   					$("#artefacto_accordion").accordion('activate',3);
			   					artefactoControlador++;
			   				 }
			   				
			   				 if(artefactoControlador==1){
			   		          $("#artefacto_accordion").accordion('activate',2);
				   					//$("#buqLinkProp").trigger("click");
			   					artefactoControlador++;
			   				 }
			   				
		                   }
		            });
		        }else{
		        	//activarLlamada("buqLinkGral");	
		        	$("#artefacto_accordion").accordion('activate',1);
		         }
		        opcionPres='nin';
		        return false;
		    });
			
}


$(function () {
	// $('#file_upload').fileUploadUI();
    var initFileUpload = function (suffix) {
        $('#file_upload').fileUploadUI({
            namespace: 'upload',
            fileInputFilter: '#upload' ,
            dropZone: $('#drop_zone_' + suffix),
           // uploadTable: $('#files_' + suffix),
           // downloadTable: $('#files_' + suffix),

            buildDownloadRow: function (file) {
                guardarPathBuque($("#idArtefactoNaval").val(),file.name);
                return $('<tr><td>' + file.name + '<\/td><\/tr>');
            }
        });
    };
    initFileUpload(1);
});


function guardarPathBuque(idArtefactoNaval,nombreArchivo){
	$.ajax({
	    type: "POST",                           
	    url: "${pageContext.request.contextPath}/artefacto.action",
	    data: {oper:"pathArtefacto",idArtefactoNaval:idArtefactoNaval,nomArchivo:nombreArchivo},                                
	    success: function(data){                            
	    	alert("Guarde");
	    }                         
	    });
}

	var artefactoPorCiento=0;
	var artefactoControlador=0;
	$(document).ready(function(){
			$("#drop_zone_1").hide();
			ponerTitulo("Registro Artefactos Navales");
			
			
			gridPersonas();
		//	gridMotorBuques();
			gridArtefacto();
			//$(".omi").hide();
			//$("#artefactoCont4").button();	
			$("#artefactoCont3").button();	
			$("#artefactoCont2").button();
			$("#artefactoCont1").button();
			$("#artefactoCont0").button();
			
			$("#artefactoRegre3").button();
			$("#artefactoRegre2").button();
			$("#artefactoRegre1").button();
			
			$( "#fechaResolucionDE" ).datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '1990:2020'
        });
			$( "#fechaNotificacion" ).datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '1990:2020'
        });
			$( "#fechaExpiracion" ).datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '1990:2020'
        });
			$( "#fechaEmision" ).datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '1990:2020'
        });
			$( "#fechaResolucionDE" ).datepicker("option", "dateFormat", 'dd/mm/yy');
			$( "#fechaNotificacion" ).datepicker("option", "dateFormat", 'dd/mm/yy');
			$( "#fechaExpiracion" ).datepicker("option", "dateFormat", 'dd/mm/yy');
			$( "#fechaEmision" ).datepicker("option", "dateFormat", 'dd/mm/yy');
			
			cargarCombo('${pageContext.request.contextPath}/combo.action','tipoArtefacto','#idTipoArtefacto');
			cargarCombo('${pageContext.request.contextPath}/combo.action','puerto','#idPuerto');
			cargarCombo('${pageContext.request.contextPath}/combo.action','material','#idMaterial');
			cargarCombo('${pageContext.request.contextPath}/combo.action','agrupa','#idAgrupacion');
			desactivarAcordiones("#artefactoDatosGenerales");
			desactivarAcordiones("#datosGenerales");
			desactivarAcordiones("#artefactoPropietario");
			desactivarAcordiones("#artefactoResolucion");

			$( "#artefacto_accordion" ).accordion();
			 enviarFormArtefacto("#artefactoForm");
			$("#idArtefactoGral").css("height",'320');
			//$("span").removeClass("ui-icon ui-icon-triangle-1-e");

			
			    //initFileUpload(1);

	});



	
	
/*	function verificarOmi(){
		if($("#numeroOmi").val()!=""){
			$(".omi").show();
		}else{
			$(".omi").hide();
		}
			
	}*/
	
	
	function desactivarAcordiones(id){
		  $(id).click(function(event){
	             //alert("aca es");
	                 event.preventDefault();
	                 return false;
	          });
	}
	
	
	function activarLlamada(id){
		//$("#"+id).trigger("click");
		artefactoControlador--;
		  $("#artefacto_accordion").accordion('activate',id);
	}
	
	function gridPersonas(){
		
		jQuery("#sPersona").jqGrid({ 
		url:'${pageContext.request.contextPath}/persona.action?oper=personaAux',
		editurl:'${pageContext.request.contextPath}/persona.action', 
		datatype: "json", 
		height: 'auto', width: 'auto', 
		colModel:[ 
					{name:'idPersona',index:'idPersona',hidden:true, width:150, label:'Id persona', sortable:true, editable:true},
					{name:'nombrePersona',index:'nombrePersona', width:250, label:'Nombre', editable:true, edittype:"text"},
					{name:'dui',index:'dui', width:150, label:'Documento', editable:true, edittype:"text"}
				], 
		rowNum:5, rowList:[5,10,15], 
		mtype: "POST", 
		rownumbers: true, rownumWidth: 40,
		onSelectRow:function(rowid,status){
			if(($("#ArtefactoTotal").val()/1)<100){
						crearFila(rowid);
					}else{
						alert("El porcentaje no puede exceder el 100%");
					}
			
		}, 
		gridview: true, 
		pager: '#sPagerPersona', 
		sortname: 'idPersona', viewrecords: true, sortorder: "asc", 
		caption: "Personas" 
	}).navGrid('#sPagerPersona', { edit:false,add:false,del:false,search:false,refresh:true }); 
		jQuery("#sPersona").jqGrid('filterToolbar',{stringResult: false,searchOnEnter : true}); 
	}

	function cargarDataArtefacto(rowId){
		  $.ajax({
		        url:"${pageContext.request.contextPath}/artefacto.action",
		        data:{oper:"datosArtefacto",idArtefactoNaval:rowId},
		        success:function(responseText, statusText) {
		        	  var decs = eval(responseText);
		        	  $("#nombreArtefacto").val(decs.artefacto.nombreArtefacto);
		        	  $("#idArtefactoNaval").val(decs.artefacto.idArtefactoNaval);
		        	  //$("#fechaNotificacion").val(decs.artefacto.fechaNotificacion);
		        	 if(decs.artefacto.idAgrupacion!=null)
		        	  $("#idAgrupacion").val(decs.artefacto.idAgrupacion.idAgrupacion);
		        	  $("#numeroOficial").val(decs.artefacto.numeroOficial);
		        	  $("#distintivoLlamada").val(decs.artefacto.distintivoLlamada);
		        	  $("#fotografia").val(decs.artefacto.fotografia);
		        	  if(decs.artefacto.idTipoArtefacto!=null)
		        	  $("#idTipoArtefacto").val(decs.artefacto.idTipoArtefacto.idTipoArtefacto);
		        	  $("#desplazamiento").val(decs.artefacto.desplazamiento);
		        	  if(decs.artefacto.idPuerto!=null)
		        	  $("#idPuerto").val(decs.artefacto.idPuerto.idPuerto);
		        	  $("#ubicacionFisica").val(decs.artefacto.ubicacionFisica);
		        	  if(decs.artefacto.idMaterial!=null)
		        	  $("#idMaterial").val(decs.artefacto.idMaterial.idMaterial);
		        	  $("#color").val(decs.artefacto.color);
		        	  $("#construidoEn").val(decs.artefacto.construidoEn);
		        	  $("#constructor").val(decs.artefacto.constructor);
		        	  $("#observaciones").val(decs.artefacto.observaciones);
					 // $("#resolucionDe").val(decs.artefacto.resolucionDe);
					//  $("#fechaResolucionDe").val(decs.artefacto.fechaResolucionDe);
					 // $("#fechaNotificacion").val(decs.artefacto.fechaNotificacion);
				     // $("#fechaEmision").val(decs.artefacto.fechaEmision);
					//  $("#fechaExpiracion").val(decs.artefacto.fechaExpiracion);
					$("#porPer").html("");			        	  
		        	  $("#porPer").append(decs.duennos);
		        	  $("#ArtefactoTotal").val(decs.total);	
		        	  if((decs.total/1)==100)
		        	  $("#artefactoCont2").show();
		        	  else
		        	  $("#artefactoCont2").hide();
		        	  $("#contador").val(decs.contador);
		        	  $("#oper").val("edit");
					  $("#artefactoImg").html("");
		        	  //${pageContext.request.contextPath}/
		        	  //alert(decs.buques.foto);
		        	  $("#artefactoImg").html("<img style='margin-top:10%;margin-left:30%' width='250' height='250' src='${pageContext.request.contextPath}/imagenes/"+decs.artefacto.fotografia+"'></img>");
		        	  
		        	
		              
		        },
		        dataType:'JSON'
		    });
	}

	
	function gridArtefacto(){
		
		jQuery("#sArtefacto").jqGrid({ 
		url:'${pageContext.request.contextPath}/artefacto.action?oper=cargarArtefacto',
		//editurl:'${pageContext.request.contextPath}/buq.action', 
		data : {idArtefacto:$("#idArtefacto").val()},
		datatype: "json", 
		height: 'auto', width: 'auto', 
		colModel:[ 
					{name:'idArtefactoNaval',index:'idArtefactoNaval',hidden:true, width:150, label:'Id Opcion Menu', sortable:true, editable:true},
					{name:'nombreArtefacto',index:'nombreArtefacto', width:250, label:'Nombre Artefacto', editable:true, edittype:"text"},
					{name:'numeroOficial',index:'numeroOficial', width:150, label:'Numero Oficial', editable:true, edittype:"text"}
				], 
				rowNum:5, rowList:[5,10,15], 
		mtype: "POST", 
		rownumbers: true, rownumWidth: 40,
		onSelectRow:function(rowid,status){
			//alert("id artefacto"+rowid);
			cargarDataArtefacto(rowid);
			$("#drop_zone_1").show();
			
		}, 
		gridview: true, 
		pager: '#sPagersArtefacto', 
		sortname: 'idPersona', viewrecords: true, sortorder: "asc", 
		caption: "Artefactos Navales" 
	}).navGrid('#sPagersArtefacto', { edit:false,add:false,del:false,search:false,refresh:true }); 
		jQuery("#sArtefacto").jqGrid('filterToolbar',{stringResult: false,searchOnEnter : true}); 
}


			function validarPorCiento(idInput){
				temporal = 0;
				temporal = artefactoPorCiento + ($("#porcentajeVal"+idInput).val()/1);
				if(temporal>100){
					//buquePorCiento = buquePorCiento - ($("#porcentajeVal"+idInput).val()/1);	
					alert("El porcentaje no puede exceder el 100%");
				}else{
					$("#bqBor"+idInput).show();
					artefactoPorCiento = temporal;
					$("#nombreVal"+idInput).attr("readonly","readonly");
					$("#porcentajeVal"+idInput).attr("readonly","readonly");
					$("#ArtefactoTotal").val(artefactoPorCiento);
					$("#embAdd"+idInput).hide();
				}
				if(temporal==100){
				     $("#artefactoCont2").show();
				    }
			}

	function eliminarDuenno(idFila,idPersona,idArtefactoNaval){
		$.ajax({
		    type: "POST",                           
		    url: "${pageContext.request.contextPath}/artefacto.action",
		    data: {oper:"eliminarDuenos",idPersona:idPersona,idArtefactoNaval:idArtefactoNaval},                                
		    success: function(data){                            
		    	artefactoPorCiento = ($("#artefactoTotal").val()/1) - ($("#porcentajeVal"+idFila).val()/1);
				$("#artefactoTotal").val(artefactoPorCiento);
				$("#tr"+idFila).remove();
				if($("#porPer tr").length>0){
					$("#artefactoCont2").hide();
				}else{
					$("#artefactoCont2").show();
				}
		    }                         
		    });
	}
			function crearFila(rowid){
				var conta = ($("#contador").val()/1) + 1;
				var html = "<tr id='tr"+conta+"'> ";
				html  = html + "<td><input type='hidden' name='hdVal"+conta+"' id='hdVal"+conta+"' value='"+rowid+"'> </td>";		 
				html  = html + "<td><input type='text' name='nombreVal"+conta+"' id='nombreVal"+conta+"'> </td>";
				html  = html + "<td><input type='text' class='number' name='porcentajeVal"+conta+"' id='porcentajeVal"+conta+"'>%</td>";
				html  = html + "<td><input id='embAdd"+conta+"' class='agrego' type='button' onclick='javascript:validarPorCiento("+conta+")'></td>";
				html  = html + "<td><input type='button' id='bqBor"+conta+"' class='delete' onclick='javascript:eliminarFila("+conta+")'></td>";
				html  = html + "</tr>";
				$("#porPer").append(html);
				$("#contador").val(conta);
				$("#bqBor"+conta).hide();
				var nombreP= jQuery("#sPersona").getCell(rowid,"nombrePersona");
				$("#nombreVal"+conta).val(nombreP);
				if($("#porPer tr").length>0){
					$("#artefactoCont2").hide();
				}else{
					$("#artefactoCont2").show();
				}
			}
			function eliminarFila(idFila){
				//var conta = ($("#contador").val()/1) - 1;
				artefactoPorCiento = artefactoPorCiento - ($("#porcentajeVal"+idFila).val()/1);
				$("#ArtefactoTotal").val(artefactoPorCiento);
				$("#tr"+idFila).remove();
				if($("#porPer tr").length>0){
					$("#artefactoCont2").hide();
				}else{
					$("#artefactoCont2").show();
				}
				//$("#contador").val(conta);
			}
</script>


<form class="ninguna" id="artefactoForm" name="artefactoForm"
	action="artefactoNaval.action" enctype='multipart/form-data'>
	<div id="artefacto_accordion">
		<!-- ------------------------------------------------------------------------------------------ -->
		<h3>
			<a id="artefactoDatosGenerales" href="#">Buscar Artefacto Naval</a>
		</h3>
		<!-- ------------------------------------------------------------------------------------------ -->
		<div id="idArtefactoGral">

			<fieldset>
				<legend>Indicacion</legend>
				* Si es un nuevo registro no es necesario que seleccione un
				Artefacto Naval
			</fieldset>
			<div id="container1">
			
				<div id="grid_artefato">
					
				<table id="sArtefacto" ></table>
				<div id="sPagersArtefacto"  style="text-align:center;"></div>

						
			<input type="button" onclick="javascript: $('#artefacto_accordion').accordion('activate',1);artefactoControlador++;" id="artefactoCont0" value="Continuar>>">
					
				</div >
				<div id="artefactoImg" class="columna_derecha"></div>
				
			</div>
		</div>
		<!-- ------------------------------------------------------------------------------------------ -->
		<h3>
			<a id="datosGenerales" href="#">Datos Generales</a>
		</h3>
		<!-- ------------------------------------------------------------------------------------------ -->

		<div style="height: 700px;">
			<input type="button" onclick="javascript:activarLlamada(0)"
				id="artefactoRegre1" value="<<Regresar">

			<table>
				<tr>
					<td>Nombre de Artefacto:</td>
					<td><input type="text" id="nombreArtefacto" class="required"
						name="nombreArtefactoNaval" maxlength="100"></td>
					<td>Tipo de Artefacto:</td>
					<td><select id="idTipoArtefacto" name="idTipoArtefacto"></select>
					</td>
					<td>Numero Oficial:</td>
					<td><input type="text" id="numeroOficial"
						name="numeroOficialArtefacto" class="required" maxlength="20"></td>
				</tr>

				<tr>
					<td>Distintivo Llamada:</td>
					<td><input type="text" id="distintivoLlamada"
						name="distintivoLlamada" maxlength="100"></td>
					<td>Desplazamiento:</td>
					<td><select name="desplazamiento" id="desplazamiento">
							<option value="S">SI</option>
							<option value="N">NO</option>
					</select></td>
					<td>Puerto:</td>
					<td><select id="idPuerto" name="idPuerto"></select></td>
				</tr>
				<tr>
					<td>Ubicacion Fisica:</td>
					<td><input type="text" id="ubicacionFisica"
						name="ubicacionFisica" maxlength="100"></td>
					<td>Material:</td>
					<td><select id="idMaterial" name="idMaterial" /></td>
					<td>Color:</td>
					<td><input type="text" id="color" name="color" maxlength="50"></td>
				</tr>
				<tr>
					<td>Construido En:</td>
					<td><input type="text" id="construidoEn" name="construidoEn" maxlength="50">
					</td>
					<td>Constructor:</td>
					<td><input type="text" id="constructor" name="constructor" maxlength="50">
					</td>
					<td>Agrupacion:</td>
					<td><select id="idAgrupacion" name="idAgrupacion" /></td>
				</tr>
				<tr>
					<td aling="center" style="vertical-align:middle">Observaciones:</td>
					<td><textarea id="observaciones" name="observaciones"></textarea>
					</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>

			</table>
			<input type="submit" id="artefactoCont1" value="Continuar>>">
			<br>
			<br>
		
		</div>

		<!-- ------------------------------------------------------------------------------------------ -->
		<h3>
			<a id="artefactoPropietario" href="#">Propietarios</a>
		</h3>
		<!-- ------------------------------------------------------------------------------------------ -->
		<div>
			<input type="button" onclick="javascript:activarLlamada(1)"
				id="artefactoRegre2" value="<<Regresar">
			<fieldset>
				<legend>Indicacion</legend>
				<b>* Para agregar un nuevo due&ntilde;o seleccione del grid,luego digite el porcentaje y luego de clic en el boton +. 
				Recuerde el porcentaje tiene que ser el 100 % </b>
			</fieldset>
			<table>
				<tr>
					<td>
						<table id="sPersona" cellpadding="0" cellspacing="0"></table>
						<div id="sPagerPersona" style="text-align: center;"></div>
					</td>
					<td>
						<table id="porPer">

						</table>
					</td>
				</tr>
				<tr>
					<td>Total : <input type="text" id="ArtefactoTotal" readonly />
					</td>
				</tr>
			</table>

			<input type="submit" id="artefactoCont2" value="Continuar>>">
		</div>


		<!-- ------------------------------------------------------------------------------------------ -->
		<h3>
			<a id="artefactoResolucion" href="#">Resolucion</a>
		</h3>
		<!-- ------------------------------------------------------------------------------------------ -->

		<div>
			<input type="button" onclick="javascript:activarLlamada(2)"
				id="artefactoRegre3" value="<<Regresar">
			<table width="477" border="0" align="center">

				<tr>
					<td>Estado:</td>
					<td><select name="estado" id="estado">
							<option value="I">Inscrito</option>
							<option value="B">Baja de Bandera</option>
					</select>
					</td>
				</tr>
				<tr>
					<td width="122">Fecha de Resolucion de Director Ejecutivo:</td>
					<td width="345"><input name="fechaResolucionDE"
						id="fechaResolucionDE" width="200" type="text" size="40" /></td>
				</tr>
				<tr>
					<td width="122">Fecha de Notificacion :</td>
					<td width="345"><input name="fechaNotificacion"
						id="fechaNotificacion" width="200" type="text" size="40" /></td>
				</tr>
				<tr>
					<td width="122">Fecha de Emision :</td>
					<td width="345"><input name="fechaEmision" id="fechaEmision"
						width="200" type="text" size="40" /></td>
				</tr>
				<tr>
					<td width="122">Fecha de Expiracion :</td>
					<td width="345"><input name="fechaExpiracion"
						id="fechaExpiracion" width="200" type="text" size="40" /></td>
				</tr>
				<tr>
					<td height="74">Resolucion de Director Ejecutivo:</td>
					<td><input type="text" name="resolucionDE" id="resolucionDE">
					</td>
				</tr>



			</table>
			<input type="button" value="Finalizar" id="artefactoCont3"
				onclick="javascript:embEspecialFinal()">

		</div>
	</div>
	<input type="hidden" id="contador" name="contador" value="0"> <input
		type="hidden" id="oper" name="oper" value="add"> <input
		type="hidden" id="idArtefactoNaval" name="idArtefactoNav" value="0">
</form>

<form id="file_upload" action="archBuq.action" method="POST"
	enctype="multipart/form-data">
	<div id="drop_zone_1">
		<input id="upload" type="file" name="upload" multiple>
		<div>Upload files</div>
	</div>
</form>